import React, {useEffect, useState} from 'react';
import {Button, Form, Input, message, Space, Tooltip} from "antd";
import {MinusCircleOutlined, PlusOutlined, QuestionCircleOutlined} from "@ant-design/icons";
import QMap from "@/pages/info/QMap";
import UploadBanner from "@/cms/UploadBanner";
import {Seat} from "@/cms/layout";

function Info(props) {
    const [info,setInfo] = useState({}),
        [form] = Form.useForm()
    useEffect(()=>{
        queryList();
    },[])
    function queryList(){
        ax.get("/api/getCustomerList").then(res=>{
            setInfo(res.data[0]);
            form.setFieldsValue({
                ...res.data[0]
            })
        })
    }
    function onFinish(values){
        ax.post("/api/addCompany",{
            ...info,
            ...values,
            banners:values.banners.map(item=>({url:item.url||item.response.message}))
        }).then(res=>{
            message.success(res.msg);
            queryList();
        })
    }
    return (
        <div>
            <Form
                labelCol={{span: 5}}
                wrapperCol={{span: 14}}
                form={form}
                onFinish={onFinish}
            >
                <Form.Item
                    label={"名称"}
                    name={"name"}
                >
                    <Input placeholder={"请输入"}/>
                </Form.Item>
                <Form.Item
                    label={"详细地址"}
                    name={"address"}
                >
                    <Input placeholder={"请输入店铺地址"}/>
                </Form.Item>
                <Form.Item
                    label={<span>
                        坐标系
                        <Tooltip title={"点击地图标记店铺位置 , 用于查看客户与店铺之间的距离"} >
                            <QuestionCircleOutlined />
                        </Tooltip>
                    </span>}
                    name={"coord"}
                >
                    <QMap />
                </Form.Item>

                {/*<Form.Item*/}
                {/*    label={"适合人数"}*/}
                {/*    name={"info"}*/}
                {/*>*/}
                {/*    <Input placeholder={"如:2-3人"}/>*/}
                {/*</Form.Item>*/}
                <Form.Item
                    label={"联系人"}
                >
                    <Form.List name="phone_list">
                        {(fields, { add, remove }) => (
                            <>
                                {fields.map(({ key, name, ...restField }) => (
                                    <Space
                                        key={key}
                                        style={{
                                            display: 'flex',
                                            marginBottom: 8,
                                        }}
                                        align="baseline"
                                    >
                                        <Form.Item
                                            {...restField}
                                            name={[name, 'user_name']}
                                            rules={[
                                                {
                                                    required: true,
                                                    message: '请填写联系人',
                                                },
                                            ]}
                                        >
                                            <Input placeholder={"联系人称呼"}/>
                                        </Form.Item>
                                        <Form.Item
                                            {...restField}
                                            name={[name, 'phone']}
                                            rules={[
                                                {
                                                    required: true,
                                                    message: '请填写手机号',
                                                },
                                            ]}
                                        >
                                            <Input placeholder={"手机号"}/>
                                        </Form.Item>

                                        <MinusCircleOutlined onClick={() => remove(name)} />
                                    </Space>
                                ))}
                                <Form.Item>
                                    <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                                        添加联系人
                                    </Button>
                                </Form.Item>
                            </>
                        )}
                    </Form.List>
                </Form.Item>
                <Form.Item
                    label={"店铺海报"}
                    name={"banners"}
                >
                    <UploadBanner />
                </Form.Item>
                <div className={"flexCenter"}>
                    <Button type={"primary"} style={{width:120}} htmlType={"submit"}>保存</Button>
                </div>
                <Seat h={150}/>
            </Form>
        </div>
    );
}

export default Info;